<script setup>
import { ref, watch } from "vue";
import store from "@/store/index";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },

   isPc: {
    type: Boolean,
    default: false,
  },
});

const title = ref("请前往客户端添加账号绑定")

const emit = defineEmits(["close"]);
const appName =ref('');

const appPath = import.meta.env.VITE_APP_SHORT_NAME;
const appVersion = import.meta.env.VITE_APP_VERSION;
const aiConfig = ref();

function initData() {
  store.dispatch("getAiConfig").then((res) => {
    if (res) {
      aiConfig.value = res;
    }
  });
}

initData();

const downloadCancel = () => {
  emit("close");
};

  watch(
      () => props.isPc,
      (val) => {
       title.value = "请前往客户端查看"
      },
      {
        immediate: true,
      }
    );

    watch(
      ()=>props.visible,
      (val) => {
        if (val) {
          store.dispatch("getAiConfig").then((aiConfig) => {
            appName.value = aiConfig.site_name
          })
        } 
      },
    )

</script>

<template>
  <a-modal
    :visible="visible"
    :width="450"
    closable
    @cancel="downloadCancel"
    :footer="null"
    centered
    :forceRender="true"
    :zIndex="1003"
    wrapClassName="download-modal"
    :title="title"
  >
    <div class="text-center">
      <h2 style="color: #162d5b; font-size: 24px">下载{{ appName }}客户端 <span style="font-size:10px;color:#999;">v{{appVersion}}</span></h2>
      <div style="color: #abb0bd; font-size: 20px">
        同时支持windows,macOS版本
      </div>
      <div class="down-list">
        <div class="down-item">
          <a
            download=""
            :href="`${aiConfig?.shotack_desktop_path}/${appPath}-${appVersion}-setup.exe?version=${appVersion}`"
            target="_blank"
            ><div>
              <img
                src=""
                alt=""
              />
            </div>
            <span>Windows64位</span></a
          >
        </div>

        <!-- <div class="down-item">
          <a
            download=""
            :href="`${aiConfig?.desktop_path}/${appPath}-${appVersion}-win-ia32.exe?version=${appVersion}`"
            target="_blank"
            ><div>
              <img
                src=""
                alt=""
              />
            </div>
            <span>Windows32位</span></a
          >
        </div> -->

        <div class="down-item">
          <a
            download=""
            :href="`${aiConfig?.shotack_desktop_path}/${appPath}-${appVersion}.dmg?version=${appVersion}`"
            target="_blank"
            ><div>
              <img
                src=""
                alt=""
              />
            </div>
            <span>macOS</span></a
          >
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
.modal-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.app-item {
  cursor: pointer;
}

.app-item-img {
  display: flex;
  width: 50px;
  height: 50px;
}

.app-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}

.app-item-txt {
  display: flex;
  justify-content: center;
  line-height: 40px;
}
</style>

<style lang="less">
.account-modal .ss-modal-body {
  padding: 0;
}

.account-modal .ss-modal-content {
  height: 100%;

  .ss-modal-body {
    height: 100%;
  }
}

.download-modal {
  .down-list {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    height: 148px;
    width: 100%;
    margin-top: 20px;
    padding: 0 20px;
    .down-item {
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      cursor: pointer;
      box-shadow: 0 2px 16px rgba(28, 76, 186, 0.08);
      text-align: center;
      width: 148px;
      height: 148px;
      border-radius: 4px;

      > a {
        width: 100%;
        height: 100%;
        padding: 24px 0;
        display: inline-block;
      }

      div {
        padding-bottom: 12px;
      }
    }
  }
}
</style>
